<template>
  <div style="padding: 10px 15px; background-color: #ffffff">
    <div class="containerdiv">
      <div class="headdiv">
        <span class="jurisdictionName">权限管理</span>
        <div class="titlediv">
          <span class="spantitle"
            >根据职能选择角色，然后进行权限配置，可以新增账号，也可自定义角色。</span
          >
         
        </div>
      </div>
      <!--
        <div v-loading="listLoading" class="juriscontainerdiv">
        <div v-for="item in SysroleData" :key="item.roleName" class="jurisitem">
          <div class="configjuris">
            <i
              class="el-icon-close"
              :title="'点击删除' + item.roleName + '角色'"
              style="
                cursor: pointer;
                width: 15%;
                line-height: 24px;
                text-align: center;
              "
              @click="deleteRoleClick(item)"
            />
          </div>
          <div
            class="adminicon"
            :title="'查看' + item.roleName + '权限'"
            @click="handleCreate(2, item)"
          >
            <img
              width="36"
              height="36"
              :src="
                item.imageUrl == '' ||
                item.imageUrl == null ||
                item.imageUrl == undefined
                  ? require('@/assets/admin.png')
                  : item.imageUrl
              "
            />
          </div>
          <div class="jurisname">{{ item.roleName }}</div>
          <div class="jurisdec" style="height: 47px; overflow-y: auto">
            {{ item.memo }}
          </div>
          <div class="jurisnum">
            该角色目前已配置<span style="color: red">{{ item.memCount }}</span
            >个账号
          </div>
          <div
            class="jurissearch"
            style="cursor: pointer"
            @click="handleCreate(2, item)"
          >
            <span>查看权限</span>
            <img
              src="@/assets/wen.png"
              width="14"
              height="14"
              :title="'查看' + item.roleName + '权限'"
            />
          </div>
          <div class="jurisfooter">
            <div
              @click="handleMemCreate(item.roleName, 1, item.id, true, 1, null)"
            >
              新增账号
            </div>
            <div @click="handleMemListCreate(item.roleName, 1, item.id, false)">
              管理账号
            </div>
          </div>
        </div>
        <div class="jurisitem">
          <div class="configjuris" />
          <div
            class="adminicon"
            :title="'点击新增角色'"
            @click="handleCreate(1, '')"
          >
            <img src="@/assets/zdy.png" width="36" height="36" />
          </div>
          <div class="jurisname">自定义</div>
          <div class="jurisdec">
            配置自定义角色，并在该角色下配置员工账号及权限。
          </div>
          <div class="jurisnum" />
          <div class="jurissearch" />
          <div class="jurisfooter" style="justify-content: center">
            <el-button type="primary" @click="handleCreate(1, '')"
              >新增角色</el-button
            >
          </div>
        </div>
      </div>
    -->

      <div class="filter-container">
        <el-input
          v-model="listQuery.title"
          placeholder="请输入角色名称"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter(2)"
        />
        <el-button
          class="filter-item seachbttn"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter(1)"
          >查询</el-button
        >
      </div>
      <div class="filter_fenge"></div>
      <div class="filter-container">
        <el-button
          v-if="Jurisdiction('添加')"
          class="filter-item bttnleft"
          type="primary"
          icon="el-icon-edit"
          @click="handleCreate"
          >新增</el-button
        >
        <el-button
          v-if="Jurisdiction('删除')"
          class="filter-item"
          type="danger"
          icon="el-icon-delete"
          @click="deleteRoleClick()"
          >删除</el-button
        >
      </div>
      <!--table-->
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="SysroleData"
        fit
        highlight-current-row
        style="width: 100%"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="角色名称" align="left" min-width="150px">
          <template slot-scope="{ row }">
            <span>{{ row.roleName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色描述" align="left" min-width="180px">
          <template slot-scope="{ row }">
            <span>{{ row.memo }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="排序"
          align="right"
          width="50px"
          min-width="50px"
        >
          <template slot-scope="{ row }">
            <span>{{ row.orderID }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="400">
          <template slot-scope="scope">
            <el-button
              v-if="Jurisdiction('编辑')&&(scope.row.cpnId==sys||loginid!=sys)"
              type="primary"
              size="mini"
              @click="handleCreate(2, scope.row)"
              >编辑角色</el-button
            >
             <el-button
              type="primary"
              size="mini"
              v-if="scope.row.cpnId==sys||loginid!=sys"
               @click="handleMemCreate( scope.row.roleName, 1, scope.row.id, true, 1, null)"
             
              >新增角色账户</el-button
            >
             <el-button
              type="primary"
              size="mini"
              v-if="scope.row.cpnId==sys||loginid!=sys"
              @click="handleMemListCreate( scope.row.roleName, 1,  scope.row.id, false)"
              >查看角色账户</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="deleteRoleClick(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      
    <pagination
      v-show="listQuery.total > 0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData(this)"
    />
    </div>

    <!--弹出层新增\编辑角色模块-->
    <el-dialog
      :visible.sync="dialogFormVisible"
      width="55%"
      :before-close="handleClose"
      :show-close="true"
    >
      <template slot="title">
        <div style="font-size: 20px; margin-left: 1%">
          <span v-if="form.id != '' && form.id != undefined"
            >编辑 <span style="color: #409eff">{{ form.roleName }}</span
            >角色</span
          >
          <span v-else>新增角色</span>
        </div>
      </template>
      <el-form :model="form" :inline="true" label-position="right">
        <div class="roleform">
          <div class="roleformdiv">
            <span>
              <span style="color: #ff4949">*</span>
              角色名称
            </span>
            <el-input v-model="form.roleName" />
          </div>
          <div class="roleformdiv">
            <span>
              <span style="color: #ff4949">*</span>
              角色描述
            </span>
            <el-input v-model="form.memo" />
          </div>
          <div class="roleformdiv">
            <span>
              <span style="color: #ff4949">*</span>
              排序
            </span>
            <el-input v-model="form.orderID" type="num" />
          </div>
          <div class="roleformdiv" style="width: 15%">
            <span>角色头像</span>
            <el-upload
              class="role-avatar-uploader"
              :action="this.baseurl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="
                  form.imageUrl != '' &&
                  form.imageUrl != null &&
                  form.imageUrl != undefined
                "
                width="40"
                height="40"
                :src="form.imageUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
        </div>

        <div class="jurisdetaildiv">
          <span style="margin-top: 9px">
            <span style="color: #ff4949">*</span>
            选择权限
          </span>
          <div class="treediv">
            <el-tree
              :data="ModuleList"
              node-key="id"
              default-expand-all
              show-checkbox
              :default-checked-keys="this.checkedkeys"
              :highlight-current="true"
              :expand-on-click-node="false"
              @check="check"
            />
          </div>
          <div class="checkeddiv">
            <div class="checkedtitle">已选权限</div>
            <div v-for="item in checklist" :key="item" class="checkedlistdiv">
              <span>{{ item }}</span>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </div>
    </el-dialog>
    <!--弹出层新增\编辑账户模块-->
    <el-dialog
      :visible.sync="dialogMemFormVisible"
      width="55%"
      :before-close="MemhandleClose"
      :show-close="true"
    >
      <template slot="title">
        <div style="font-size: 20px; margin-left: 1%">
          <span v-if="memform.id != '' && memform.id != undefined">编辑 </span>
          <span v-else>新增</span>
          <span style="color: #409eff">{{ memtitle }}</span
          >账户
        </div>
      </template>
      <el-form :model="memform" :inline="true" label-position="right">
        <div class="memtitle">以下均为必填信息，请输入真实的实名信息。</div>
        <div class="memdiv">
          <div class="meminfodiv">
            <div class="meminfoitem">
              <span class="meminfoitem_name">企业号</span>
              <el-select
                v-model="memform.cpnId"
                clearable
                filterable
                class="meminfoitem_value"
              >
                <el-option
                  v-for="item in cpnoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span v-html="item.label" />
                </el-option>
              </el-select>
            </div>
            <div class="meminfoitem">
              <span class="meminfoitem_name">登录账户</span>
              <el-input v-model="memform.loginName" class="meminfoitem_value" />
            </div>
            <div class="meminfoitem">
              <span class="meminfoitem_name">账户昵称</span>
              <el-input v-model="memform.nickName" class="meminfoitem_value" />
            </div>
            <div class="meminfoitem">
              <span class="meminfoitem_name">登录密码</span>
              <el-input
                v-model="memform.passWord"
                class="meminfoitem_value"
                type="Password"
                :disabled="!isUpPwd"
              />
              <el-button
                v-if="!isUpPwd && isAdd == false"
                type="primary"
                @click="updatepwd()"
                >点击修改密码</el-button
              >
              <el-button
                v-else-if="isUpPwd && isAdd == false"
                type="primary"
                @click="noupdatepwd()"
                >点击关闭修改密码</el-button
              >
            </div>
            <div class="meminfoitem">
              <span class="meminfoitem_name">确认密码</span>
              <el-input
                v-model="memform.newpassWord"
                class="meminfoitem_value"
                type="Password"
                :disabled="!isUpPwd"
              />
            </div>
            <div class="meminfo_role">
              <span class="meminfoitem_name">角色权限</span>
              <div>
                <el-checkbox
                  v-for="role in rolelist"
                  :key="role.id"
                  v-model="role.ischeck"
                  style="margin-top: 3%"
                  :label="role.roleName"
                  @change="rolechange($event, role.id)"
                />
              </div>
            </div>
          </div>
          <div class="memrolediv">
            <div class="memrole_title">该账户具有的权限</div>
            <div
              v-for="item in memrolelist"
              :key="item"
              class="memrole_listdiv"
            >
              <span>{{ item }}</span>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMemFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMemForm()">确 定</el-button>
      </div>
    </el-dialog>

    <!--弹出层员工列表模块-->
    <el-dialog
      :visible.sync="dialogMemListVisible"
      width="55%"
      :before-close="MemListhandleClose"
      :show-close="true"
    >
      <template slot="title">
        <div style="font-size: 20px; margin-left: 1%">
          <span style="color: #409eff">{{ memtitle }}</span
          >员工列表
        </div>
      </template>
      <div class="memlistdiv">
        <div class="memlisttitle">
          <el-input
            v-model="memlistQuery.title"
            placeholder="请输入登录账号或昵称"
            style="width: 240px"
            class="filter-item"
            @keyup.enter.native="handleFilter(2)"
          />
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            style="margin-left: 2%"
            @click="handleFilter(2)"
            >查询</el-button
          >
        </div>
        <div class="memlistborder" />
        <div v-if="!isDeleted" class="memlist_handlebuttom">
          <el-button
            type="primary"
            @click="handleMemCreate(memtitle, 1, memlistroleid, true, 2, null)"
            >新增{{ memtitle }}员工账号</el-button
          >
          <el-button type="primary" @click="deleteClick()">批量删除</el-button>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="memlistLoading"
        class="memlisttable"
        :data="MngrbaseinfoData"
        style="width: 100%"
        height="450"
        :cell-style="MainCellStyle"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="企业名称" align="left" min-width="150px">
          <template slot-scope="{ row }">
            <span>{{ row.cpnIDStr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="登录名" align="left" min-width="150px">
          <template slot-scope="{ row }">
            <span>{{ row.loginName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="昵称" align="left" min-width="150px">
          <template slot-scope="{ row }">
            <span>{{ row.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上次登录IP" align="left" min-width="150px">
          <template slot-scope="{ row }">
            <span>{{ row.lastLoginIP }}</span>
          </template>
        </el-table-column>
        <el-table-column label="本次登录IP" align="left" min-width="150px">
          <template slot-scope="{ row }">
            <span>{{ row.thisLoginIP }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最后一次登录" align="left" min-width="160px">
          <template slot-scope="{ row }">
            <span>{{ row.lastLoginTimeStr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="拥有角色" align="left" min-width="250px">
          <template slot-scope="{ row }">
            <span>{{ row.mangerRoles }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="!isDeleted"
          label="操作"
          fixed="right"
          width="230px"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="
                handleMemCreate(
                  memtitle,
                  1,
                  scope.row.mangerRolesIDs,
                  false,
                  2,
                  scope.row
                )
              "
              >修改信息</el-button
            >
            <el-button
              type="primary"
              size="mini"
              style="margin-top: 10px"
              @click="deleteClick(scope.row)"
              >&nbsp;&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { AjaxToken, AjaxGet } from "@/api/common";
import commconfig from "@/comm.json";
import { TipMsg } from "@/api/common";
import { SelectAjax } from "@/api/common";
import { array } from "jszip/lib/support";
import { Jurisdiction } from "@/api/common";
import sessionStorage from "@/api/Storage";
import "url-search-params-polyfill";
export default {
  name: "Role",
  components: { Pagination },
  data() {
    return {
      sys:'system',
      checkAll: false,
      isIndeterminate: true,
      formLabelWidth: "120px",
      SysroleData: null,
      loginid: "",
      ModuleList: [],
      childActions: [],
      childActionelect: [],
      multipleSelection: [],
      rolelist: [],
      selectrolelist: [],
      cpnoptions: [],
      MngrbaseinfoData: [],
      listQuery: {
        title: "",
        total: 0,
        page: 1,
        limit: 10,
      },
      memlistQuery: {
        title: "",
        total: 0,
        page: 1,
        limit: 8,
        totalPage: 0,
      },
      listLoading: false,
      dialogFormVisible: false,
      dialogMemFormVisible: false,
      dialogMemListVisible: false,
      memlistLoading: false,
      form: {
        id: "",
        roleName: "",
        memo: "",
        orderID: "",
        isDeleted: "",
        cpnId: "",
        imageUrl: "",
      },
      details_form: {
        id: "",
        roleName: "",
        memo: "",
        orderID: "",
        isDeleted: "",
        cpnId: "",
        imageUrl: "",
      },
      memform: {
        id: "",
        loginName: "",
        passWord: "",
        newpassWord: "",
        nickName: "",
        state: "",
        createTime: "",
        isDeleted: "",
        lastLoginIP: "",
        lastLoginTime: "",
        thisLoginIP: "",
        thisLoginTime: "",
        loginNumber: "",
        cpnId: "system",
        tel: "",
        email: "",
        roleName: "",
      },
      memtitle: "新增账号",
      checkedkeys: [],
      checklist: [],
      memModuleList: [],
      memrolelist: [],
      baseurl: "",
      memlistroleid: "",
      isAdd: true,
      isUpPwd: false,
      opentyp: 1,
      isDeleted: false,
      busy: false,
      dom: "",
    };
  },
  created() {
    debugger;
    var user = JSON.parse(sessionStorage.getItem("userinfo"));
    this.loginid = user.cpnId;
    this.baseurl = commconfig.baseapi + "UploadFileAttch";
    this.fetchData();
  },
  mounted() {
    debugger;
    var user = JSON.parse(sessionStorage.getItem("userinfo"));
    this.loginid = user.cpnId;
  },
  methods: {
    MainCellStyle({ row, column, rowIndex, columnIndex }) {
      var style = "height:62px;";
      return style;
    },
    handleScroll() {
      // 滚动条距离底部的距离scrollBottom
      const scrollBottom =
        this.dom.scrollHeight - this.dom.scrollTop - this.dom.clientHeight;
      if (scrollBottom < 1) {
        if (!this.busy) {
          this.busy = true;
          this.memlistQuery.page += 1;
          this.memfetchData();
        }
      }
    },
    handleAvatarSuccess(res, file) {
      this.form.imageUrl = JSON.parse(res.data)[file.name];
    },
    beforeAvatarUpload(file) {
      var imglist = ["png", "jpg", "jpeg", "bmp"];
      // 判断是文件还是图片
      var flieArr = file.name.split(".");
      var suffix = flieArr[flieArr.length - 1];
      // 进行图片匹配
      var isJPG = imglist.some(function (item) {
        return item == suffix;
      });
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 png/jpg/jpeg/bmp 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }
    },
    Jurisdiction(moduleActionName) {
      return Jurisdiction(moduleActionName, this);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 列表页面查询typ=1角色列表，typ=2账户列表
    handleFilter(typ) {
      if (typ == 1) {
        this.listQuery.page = 1;
        this.fetchData();
      } else {
        this.memlistQuery.page = 1;
        this.memfetchData();
      }
    },
    // 管理账户弹出层关闭
    MemListhandleClose() {
      this.dialogMemListVisible = false;
    },
    // 管理账户弹出层打开，typ=1在某个角色下面管理账户,typ=2在所有角色下管理账户
    handleMemListCreate(title, typ, roleid, isdelete) {
      const that = this;
      that.dialogMemListVisible = true;
      setTimeout(function () {
        that.dom = that.$refs.multipleTable.bodyWrapper;
        that.dom.addEventListener("scroll", that.handleScroll);
        that.memtitle = typ == 1 ? title : "";
        that.isDeleted = isdelete;
        if (typ == 1) {
          that.memlistroleid = roleid;
        } else {
          that.memlistroleid = "";
        }
        that.memlistQuery.page = 1;
        that.memlistQuery.title = "";
        that.memfetchData();
      }, 100);
    },

    // 角色权限关闭弹出层
    handleClose() {
      this.dialogFormVisible = false;
    },

    // 新增、编辑角色打开弹出层1-新增，2编辑
    handleCreate(typ, row) {
      this.childActions = [];
      this.checkedkeys = [];
      this.checklist = [];
      this.ModuleList = [];
      this.form = JSON.parse(JSON.stringify(this.details_form));
      if (typ == 2) {
        // 编辑
        this.form.id = row.id;
        this.form.roleName = row.roleName;
        this.form.memo = row.memo;
        this.form.orderID = row.orderID;
        this.form.imageUrl = row.imageUrl;
        backstage.LoadModuleList(this, row.id, 1);
      } else {
        backstage.LoadModuleList(this, "", 1);
      }
      this.dialogFormVisible = true;
    },

    // 新增/编辑账户关闭弹出层
    MemhandleClose() {
      this.dialogMemFormVisible = false;
    },
    // 新增/编辑账户打开弹出层typ=1在某个角色下面新建账户,typ=2在所有角色下建账户
    // isadd-是否新增，memformdetail-编辑详情
    // opentyp-1在角色列表打开的账户信息列表,保存成功后刷新角色列表,opentyp-2,在账户列表里面打开,保存成功后刷新账户列表
    handleMemCreate(title, typ, roleids, isAdd, opentyp, memformdetail) {
      this.memtitle = typ == 1 ? title : "";
      this.dialogMemFormVisible = true;
      this.isAdd = isAdd;
      this.opentyp = opentyp;
      this.selectrolelist = [];
      this.memrolelist = [];
      if (isAdd) {
        this.isUpPwd = true;
        this.memform = {
          id: "",
          loginName: "",
          passWord: "",
          newpassWord: "",
          nickName: "",
          state: "",
          createTime: "",
          isDeleted: "",
          lastLoginIP: "",
          lastLoginTime: "",
          thisLoginIP: "",
          thisLoginTime: "",
          loginNumber: "",
          cpnId: this.loginid,
          tel: "",
          email: "",
          roleName: typ == 1 ? title : "",
        };
      } else {
        this.isUpPwd = false;

        this.memform = JSON.parse(JSON.stringify(memformdetail));
      }
      backstage.GeCpntListItems(this);
      if (typ == 1) {
        backstage.LoadModuleList(this, roleids, 2);
        backstage.LoadMangerRoleList(this, "", roleids);
      } else {
        backstage.LoadModuleList(this, "", 2);
        backstage.LoadMangerRoleList(this, "", "");
      }
    },
    // 修改账户密码
    updatepwd() {
      this.isUpPwd = true;
    },
    noupdatepwd() {
      this.isUpPwd = false;
    },
    // 保存账户信息,opentyp-1在角色列表打开的账户信息列表,保存成功后刷新角色列表,opentyp-2,在账户列表里面打开,保存成功后刷新账户列表
    saveMemForm() {
      if (this.memform.loginName == "") {
        return TipMsg(this, "请输入登录账户");
      } else if (this.memform.nickName == "") {
        return TipMsg(this, "请输入账户昵称");
      } else if (this.memform.passWord == "" && this.isUpPwd == true) {
        return TipMsg(this, "请输入密码");
      } else if (
        this.memform.passWord != null &&
        this.memform.passWord.length < 6 &&
        this.isUpPwd == true
      ) {
        return TipMsg(this, "密码至少6位");
      } else if (this.memform.cpnId == "") {
        return TipMsg(this, "请选择企业");
      } else if (
        this.memform.passWord != this.memform.newpassWord &&
        this.isUpPwd == true
      ) {
        return TipMsg(this, "两次密码不一致,请重试");
      } else if (this.selectrolelist.length <= 0) {
        return TipMsg(this, "请至少选择一个角色");
      }
debugger;
      var params = new URLSearchParams();
      params.append("ID", this.memform.id);
      params.append("LoginName", this.memform.loginName);
      params.append("NickName", this.memform.nickName);
      params.append("PassWord", this.memform.passWord);
      params.append("typ", this.isUpPwd ? 3 : 0); // 0-不修改密码，3-修改密码
      params.append("CpnId", this.memform.cpnId);
      params.append("roles", JSON.stringify(this.selectrolelist));
      backstage.AddMangerBaseInfo(this, params);
    },
    //删除用户
    deleteClick(row) {
      var multis = [];
      var params = new URLSearchParams();
      if (row == undefined || row == "") {
        var arr = this.multipleSelection;
        if (arr == undefined || arr.length <= 0) {
          this.$message({
            showClose: true,
            message: "请至少选中一行",
            type: "error",
          });
          return;
        } else {
          for (var i = 0; i < arr.length; i++) {
            multis.push(arr[i].id);
          }
          params.append("delds", JSON.stringify(multis));
        }
      } else {
        multis.push(row.id);
        params.append("delds", JSON.stringify(multis));
      }
      this.$confirm("确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then((a) => {
          this.memlistLoading = true;
          backstage.DelManager(this, params);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.memlistLoading = false;
        });
    },
    // 角色权限change事件
    rolechange(e, id) {
      if (e) {
        if (this.selectrolelist.length <= 0) {
          this.selectrolelist.push({ RoleId: id });
        } else {
          this.selectrolelist.forEach((element) => {
            if (element.RoleId != id) {
              this.selectrolelist.push({ RoleId: id });
            }
          });
        }
      } else {
        var truerolelist = [];
        this.selectrolelist.forEach((element) => {
          if (element.RoleId != id) {
            truerolelist.push(element);
          }
        });
        this.selectrolelist = truerolelist;
      }
      var roleids = "";
      for (var i = 0; i < this.selectrolelist.length; i++) {
        roleids += this.selectrolelist[i].RoleId + ",";
      }
      if (roleids != "") {
        roleids = roleids.substring(0, roleids.length - 1);
        backstage.LoadModuleList(this, roleids, 2);
      } else {
        this.memrolelist = [];
      }
    },
    // 当复选框被点击的时候触发,共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
    check(data, obj) {
      this.treeMap_ischeck(data, obj.checkedKeys);
      this.getTreeData();
    },
    // 遍历树形菜单数据
    treeMap_ischeck(data, checkedKeys) {
      const that = this;
      if (
        data.children != null &&
        data.children != undefined &&
        data.children.length > 0
      ) {
        data.children.map(function (item) {
          that.treeMap_ischeck(item, checkedKeys);
        });
      } else {
        var isCheck = false;
        for (var i = 0; i < checkedKeys.length; i++) {
          if (checkedKeys[i] == data.id) {
            isCheck = true;
            break;
          }
        }
        data.isCheck = isCheck;
      }
    },
    // 封装树形菜单
    getTreeData() {
      const thisobj = this;
      thisobj.childActions = [];
      thisobj.checkedkeys = [];
      thisobj.checklist = [];
      thisobj.ModuleList.forEach((element) => {
        element.label = element.moduleName;
        element.children = element.childModule;
        element.children.forEach((item) => {
          item.label = item.moduleName;
          item.children = item.childAction;
          var num = 0;
          var checklabel = element.label + "-" + item.label + "[ ";
          item.children.forEach((childAction) => {
            childAction.label = childAction.actionName;
            if (childAction.isCheck) {
              num++;
              checklabel += childAction.label + "，";
              thisobj.childActions.push({ ID: childAction.id });
              thisobj.checkedkeys.push(childAction.id);
            }
          });
          if (num > 0) {
            checklabel = checklabel.substring(0, checklabel.length - 1) + " ]";
            thisobj.checklist.push(checklabel);
          }
        });
      });
    },
    getMemRoleData() {
      const thisobj = this;
      thisobj.memrolelist = [];
      thisobj.memModuleList.forEach((element) => {
        element.childModule.forEach((item) => {
          var num = 0;
          var checklabel = element.moduleName + "-" + item.moduleName + "[ ";
          item.childAction.forEach((childAction) => {
            if (childAction.isCheck) {
              num++;
              checklabel += childAction.actionName + "，";
            }
          });
          if (num > 0) {
            checklabel = checklabel.substring(0, checklabel.length - 1) + " ]";
            thisobj.memrolelist.push(checklabel);
          }
        });
      });
    },
    saveForm() {
      if (this.form.roleName == "") {
        return TipMsg(this, "请输入角色名称");
      } else if (this.form.memo == "") {
        return TipMsg(this, "请输入角色描述");
      } else if (
        this.form.orderID.length <= 0 ||
        this.form.orderID == undefined
      ) {
        return TipMsg(this, "请输入排序");
      } else if (this.childActions.length <= 0) {
        return TipMsg(this, "请选择权限");
      }
      var params = new URLSearchParams();
      params.append("ID", this.form.id);
      params.append("RoleName", this.form.roleName);
      params.append("Memo", this.form.memo);
      params.append("OrderID", this.form.orderID);
      params.append("ImageUrl", this.form.imageUrl);
      params.append("moduleActions", JSON.stringify(this.childActions));
      backstage.SaveRole(this, params);
    },
    // 删除角色
    deleteRoleClick(row) {
      var multis = [];
      var params = new URLSearchParams();
      if (row == undefined || row == "") {
        var arr = this.multipleSelection;
        if (arr == undefined || arr.length <= 0) {
          this.$message({
            showClose: true,
            message: "请至少选中一行",
            type: "error",
          });
          return;
        } else {
          for (var i = 0; i < arr.length; i++) {
            multis.push(arr[i].id);
          }
          params.append("delds", JSON.stringify(multis));
        }
      } else {
        multis.push(row.id);
        params.append("delds", JSON.stringify(multis));
      }

      this.$confirm("确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then((a) => {
          this.listLoading = true;
          backstage.DelRole(this, params);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.listLoading = false;
        });
    },
    fetchData() {
      this.listLoading = true;
      // 搜索
      var params = new URLSearchParams();
      params.append(
        "Parms",
        '{"page":' +
          this.listQuery.page +
          ',"rows":' +
          this.listQuery.limit +
          "}"
      );
      params.append("RoleName", this.listQuery.title);
      params.append("CpnId", this.loginid);
      backstage.GetRoleList(this, params);
    },
    memfetchData() {
      this.memlistLoading = true;
      var params = new URLSearchParams();
      params.append(
        "Parms",
        '{"page":' +
          this.memlistQuery.page +
          ',"rows":' +
          this.memlistQuery.limit +
          "}"
      );
      params.append("Name", this.memlistQuery.title);
      params.append("RoleId", this.memlistroleid);
      params.append("IsDelete", this.isDeleted);
      backstage.GetManagerList(this, params);
    },
  },
};
// 后台事件
var backstage = {
  // 获取Sysrole集合
  GetRoleList: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "GetRoleList",
      params,
      "post",
      function (res) {
        var body = res.data.data;
        thisobj.SysroleData = body.rows;
        thisobj.listQuery.page = body.page;
        thisobj.listQuery.total = body.records;
        thisobj.listLoading = false;
      },
      function (err) {}
    );
  },
  // typ-1：加载角色的权限,typ-2:加载账户的权限
  LoadModuleList: function (thisobj, roleid, typ) {
    AjaxGet(
      thisobj,
      "LoadModuleList?roleid=" + roleid + "",
      function (res) {
        var body = res.data.data;
        if (typ == 1) {
          thisobj.ModuleList = body;
          thisobj.getTreeData();
        } else {
          thisobj.memModuleList = body;
          thisobj.getMemRoleData();
        }
      },
      function (err) {}
    );
  },
  SaveRole: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "SaveRole",
      params,
      "post",
      function (res) {
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 2000,
          });
          thisobj.fetchData();
          thisobj.dialogFormVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
      },
      function (err) {}
    );
  },
  DelRole: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "DelRole",
      params,
      "post",
      function (res) {
        thisobj.listLoading = false;
        var body = res.data;
        thisobj.$message({
          showClose: true,
          message: body.message,
          type: body.success ? "success" : "error",
        });
        if (body.success) {
          thisobj.fetchData();
        }
      },
      function (err) {
        thisobj.listLoading = false;
      }
    );
  },
  // checkroleid 已经选中的角色
  LoadMangerRoleList: function (thisobj, id, checkroleid) {
    AjaxGet(
      thisobj,
      "LoadMangerRoleList?id=" + id + "",
      function (res) {
        var body = res.data.data;
        thisobj.rolelist = body;
        thisobj.rolelist.forEach((element) => {
          if (checkroleid.indexOf(element.id) != -1) {
            element.ischeck = true;
            thisobj.selectrolelist.push({ RoleId: element.id });
          }
        });
      },
      function (err) {}
    );
  },
  GeCpntListItems: function (thisobj) {
    SelectAjax(
      "GeCpntListItems?val=" + thisobj.loginid + "",
      function (response) {
        var body = response.data;
        thisobj.cpnoptions = [];
        body.data.forEach((element) => {
          thisobj.cpnoptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  AddMangerBaseInfo: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "AddMangerBaseInfo",
      params,
      "post",
      function (res) {
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 2000,
          });
          thisobj.handleFilter(thisobj.opentyp);
          thisobj.dialogMemFormVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
      },
      function (err) {}
    );
  },
  // 获取Mngrbaseinfo集合
  GetManagerList: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "GetManagerList",
      params,
      "post",
      function (res) {
        thisobj.memlistLoading = false;
        var body = res.data.data;
        if (thisobj.memlistQuery.page == 1) {
          thisobj.MngrbaseinfoData = body.rows;
        } else {
          thisobj.MngrbaseinfoData = thisobj.MngrbaseinfoData.concat(body.rows);
        }
        thisobj.memlistQuery.page = body.page;
        thisobj.memlistQuery.total = body.records;
        thisobj.memlistQuery.totalPage = body.total;
        if (thisobj.memlistQuery.page >= thisobj.memlistQuery.totalPage) {
          thisobj.busy = true;
        } else {
          thisobj.busy = false;
        }
      },
      function (err) {
        thisobj.memlistLoading = false;
        thisobj.busy = false;
      }
    );
  },
  // 删除账户
  DelManager: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "DelManager",
      params,
      "post",
      function (res) {
        thisobj.memlistLoading = false;
        var body = res.data;
        thisobj.$message({
          showClose: true,
          message: body.message,
          type: body.success ? "success" : "error",
        });
        if (body.success) {
          thisobj.memfetchData();
        }
      },
      function (err) {
        thisobj.memlistLoading = false;
      }
    );
  },
};
</script>
<style lang="scss" scoped>
.containerdiv {
  width: 90%;
  margin-left: 5%;
  background-color: #ffffff;
}
.headdiv {
  padding-bottom: 10px;
}
.headdiv .jurisdictionName {
  font-size: 20px;
  font-weight: 400;
  line-height: 34px;
  color: #304156;
}
.titlediv {
  width: 100%;
  height: 64px;
  background: #eff3f8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  margin-top: 1%;
}
.titlediv .spantitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #304156;
  width: 70%;
  margin-left: 1%;
  margin-right: 1%;
}
.titlediv .spansearch {
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  color: #409eff;
  width: 20%;
  text-align: right;
  margin-right: 1%;
}
.roleform {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1%;
}
.roleformdiv {
  width: 26%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.roleformdiv span {
  color: #304156;
  font-weight: 400;
}
.juriscontainerdiv {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 1%;
}
.juriscontainerdiv .jurisitem {
  width: 20%;
  margin-left: 4%;
  height: 374px;
  background: #ffffff;
  border: 1px solid #c3cad2;
  border-radius: 4px;
  margin-top: 1%;
  position: relative;
}
.jurisitem:hover {
  transform: scale(1.05);
}
.jurisitem .configjuris {
  height: 24px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.jurisitem .configjuris .configjurisspan {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #959ea8;
}
.jurisitem .configjuris img {
  margin-left: 2%;
  margin-right: 4%;
}
.jurisitem .adminicon {
  width: 72px;
  height: 72px;
  background: #eaeaea;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.jurisitem .adminicon {
  width: 72px;
  height: 72px;
}
.jurisitem .jurisname {
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  color: #304156;
  text-align: center;
  margin-top: 10px;
}
.jurisitem .jurisdec,
.jurisnum,
.jurissearch {
  width: 80%;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin-top: 5px;
  color: #959ea8;
  margin-left: auto;
  margin-right: auto;
}
.jurissearch span {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #409eff;
}
.jurisitem .jurisfooter {
  height: 40px;
  display: flex;
  justify-content: space-between;
  width: 80%;
  position: absolute;
  bottom: 9%;
  left: 10%;
}
.jurisitem .jurisfooter div {
  background: #eaeaea;
  font-size: 14px;
  line-height: 24px;
  color: #304156;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47%;
  cursor: pointer;
}
.jurisdetaildiv {
  display: flex;
  justify-content: flex-start;
}
.treediv {
  width: 45%;
  height: 400px;
  overflow-y: auto;
  border: 1px solid #c3cad2;
  border-radius: 4px;
  margin-left: 1%;
  color: #304156;
  font-size: 14px;
}
.checkeddiv {
  margin-left: 4%;
  width: 45%;
  height: 400px;
  overflow-y: auto;
  border: 1px solid #c3cad2;
  border-radius: 4px;
}
.checkedtitle {
  background: #f5f9ff;
  border-radius: 4px 4px 0px 0px;
  height: 35px;
  line-height: 35px;
  padding-left: 5px;
}
.checkedlistdiv {
  min-height: 35px;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: #959ea8;
  border-bottom: 1px solid #c3cad2;
}
.memdiv {
  display: flex;
  justify-content: flex-start;
  width: 95%;
  margin-left: 3%;
  margin-top: 2%;
}
.memtitle {
  height: 35px;
  line-height: 35px;
  background: #eff3f8;
  border-radius: 4px;
  width: 95%;
  margin-left: 3%;
}
.meminfodiv {
  width: 50%;
  border-radius: 4px;
  color: #304156;
  font-size: 14px;
}
.meminfoitem {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 3%;
}
.meminfoitem_name {
  width: 17%;
}
.meminfoitem_value {
  width: 50%;
}
.memrolediv {
  margin-left: 4%;
  width: 45%;
  height: 400px;
  overflow-y: auto;
  border: 1px solid #c3cad2;
  border-radius: 4px;
}
.memrole_title {
  background: #f5f9ff;
  border-radius: 4px 4px 0px 0px;
  height: 35px;
  line-height: 35px;
  padding-left: 5px;
}
.memrole_listdiv {
  min-height: 35px;
  font-size: 14px;
  font-weight: 400;
  align-items: center;
  padding-left: 10px;
  display: flex;
  color: #959ea8;
  border-bottom: 1px solid #c3cad2;
}
.memlistdiv {
  margin-left: 1%;
}
.memlist_table {
  height: 450px;
  overflow: auto;
  margin-left: 1%;
}
.memlisttitle {
  display: flex;
  justify-content: flex-start;
}
.memlistborder {
  height: 0;
  border: 1px solid #e6e6e6;
  margin-top: 2%;
}
.memlist_handlebuttom {
  margin-top: 2%;
  margin-bottom: 2%;
}
</style>
<style>
.roleformdiv .el-input {
  width: 60%;
  margin-left: 4%;
}
.role-avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
}
.role-avatar-uploader .el-upload {
  align-items: center;
  display: flex;
  justify-content: center;
}
.role-avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.role-avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.memlisttable .el-table__fixed-right {
  right: 10px !important;
  height: 440px !important;
}
/*定义滚动条长宽*/
.memlisttable ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
}

/*定义滚动条轨道 内阴影+圆角*/
.memlisttable ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background-color: #ffffff;
}

/*定义滑块 内阴影+圆角*/
.memlisttable ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #cccccc;
}
</style>

